<template>
  <div>
    <div style="padding: 10px 20px">
      <Icon icon="ant-design:arrow-left-outlined" @click="goBack" />
    </div>
    <PageWrapper :title="t('sys.script.details')">
      <Description title="任务详情" :column="5" :data="mockData" :schema="schema" />
      <!-- //私信 -->
      <Card style="margin: 10px 0" title="私信列表">
        <Collapse v-model:activeKey="activeKeyNode" accordion>
          <CollapsePanel
            :header="`私信 : ${index + 1} - ${item.content}`"
            v-for="(item, index) in mockData.chats"
            :key="index"
          >
            <div style="display: flex">
              <div v-for="(itemImg, index) in item.photos" style="margin-right: 20px" :key="index">
                <Image :width="100" :src="itemImg" />
              </div>
            </div>
          </CollapsePanel>
        </Collapse>
      </Card>
      <Card style="margin: 10px 0" title="评论列表">
        <Collapse v-model:activeKey="activeKeyNodeComments" accordion>
          <CollapsePanel
            :header="`私信 : ${index + 1} - ${item.content}`"
            v-for="(item, index) in mockData.comments"
            :key="index"
          >
            <div style="display: flex">
              <div v-for="(itemImg, index) in item.photos" style="margin-right: 20px" :key="index">
                <Image :width="100" :src="itemImg" />
              </div>
            </div>
          </CollapsePanel>
        </Collapse>
      </Card>
      <BasicTable @register="registerTable" />
    </PageWrapper>
  </div>
</template>

<script lang="ts" setup>
  import { ref, h } from 'vue';
  import { Collapse, CollapsePanel, Card, Image, Tooltip } from 'ant-design-vue';
  import { Description, DescItem, useDescription } from '@/components/Description';
  import { PageWrapper } from '@/components/Page';
  import {
    getTaskDetailApi,
    detailTaskPage,
    deviceToOwnerAPI,
    detailTaskPageDevAPI,
  } from '@/api/demo/Task';
  import { useRoute } from 'vue-router';
  import { useGo } from '@/hooks/web/usePage';
  import Icon from '@/components/Icon/Icon.vue';
  import { BasicTable, useTable } from '@/components/Table';
  import { useI18n } from '@/hooks/web/useI18n';

  const { t } = useI18n();
  const go = useGo();
  const route = useRoute(); // 获取当前路由对象
  const activeKeyNode = ref([]); // 默认展开第一个面板
  const activeKeyNodeComments = ref([]);
  const mockData = ref({});
  const schema: DescItem[] = [
    {
      field: 'id',
      label: '任务id',
    },
    {
      field: 'createTime',
      label: t('sys.informaionMatchaing.columns.createTime'),
    },
    {
      field: 'upvoteNum',
      label: '点赞数',
    },
    // {
    //   field: 'upvoteScale',
    //   label: '点赞概率',
    // },
    {
      field: 'chatNum',
      label: t('sys.audienceGroup.commentNum'),
    },
    // {
    //   field: 'chatScale',
    //   label: '私信概率',
    // },
    {
      field: 'chatRule',
      label: t('sys.audienceGroup.chatRule'),
    },
    {
      field: 'commentNum',
      label: t('sys.comment.columns.commentNum'),
    },
    // {
    //   field: 'commentScale',
    //   label: '评论概率',
    // },
    {
      field: 'commentRule',
      label: t('sys.comment.columns.chatRule'),
    },
    {
      field: 'collectNum',
      label: '收藏数',
    },
    // {
    //   field: 'collectScale',
    //   label: '收藏概率',
    // },
  ];
  const [register] = useDescription({
    title: 'useDescription',
    data: mockData,
    schema: schema,
  });

  async function getDetail() {
    const id = route.params.id; // 使用 route 对象获取 id

    if (id) {
      let Data = await getTaskDetailApi(id);
      if (Data.data.chats) {
        Data.data.chats.forEach((chat) => {
          chat.photos = chat.photos ? chat.photos.split(',') : [];
        });
      }
      if (Data.data.comments) {
        Data.data.comments.forEach((comment) => {
          comment.photos = comment.photos ? comment.photos.split(',') : [];
        });
      }
      mockData.value = Data.data;
    }
  }

  // 在 created 生命周期钩子中调用 getDetail
  getDetail();

  function goBack() {
    go('/questManage/TaskList');
  }

  // 表格逻辑
  const Data = ref<any>([]); // 定义 Data 为响应式变量
  const pagination = ref({
    current: 1,
    pageSize: 10,
    total: 0,
  });

  const columns = ref([
    {
      title: '视频链接',
      dataIndex: 'link',
      width: 100,
      customRender: ({ text }: { text: string }) => {
        return h(
          Tooltip,
          {
            title: text,
          },
          [
            h(
              'a',
              {
                href: text, // 添加 href 属性
                target: '_blank', // 在新标签页中打开链接
                style: {
                  display: 'inline-block',
                  width: '100%',
                  height: 'auto',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap',
                },
              },
              text,
            ),
          ],
        );
      },
    },
    {
      title: t('sys.audienceGroup.mac'),
      dataIndex: 'chat',
      width: 100,
    },
    {
      title: '是否收藏',
      dataIndex: 'collect',
      width: 50,
      customRender: ({ text }) => {
        return text === '1' ? t('sys.configuration.YES') : t('sys.configuration.NO');
      },
    },
    {
      title: t('sys.comment.columns.comment'),
      dataIndex: 'comment',
      width: 100,
    },
    {
      title: '是否点赞',
      dataIndex: 'upvote',
      width: 50,
      customRender: ({ text }) => {
        return text === '1' ? t('sys.configuration.YES') : t('sys.configuration.NO');
      },
    },
    {
      title: t('sys.device.columns.devicecode'),
      dataIndex: 'device',
      width: 100,
    },
    {
      title: '设备备注',
      dataIndex: 'deviceName',
      width: 50,
    },
    {
      title: t('sys.analysis.columns.status'),
      dataIndex: 'status',
      width: 50,
      customRender: ({ text }) => {
        const statusMap = {
          2: '完成',
          1: '已分发',
          0: '未分发',
        };
        return statusMap[text] || t('sys.code.columns.unknownState');
      },
    },
    {
      title: '分发时间',
      dataIndex: 'distributeTime',
      width: 100,
    },
    {
      title: '成功时间',
      dataIndex: 'successTime',
      width: 100,
    },
  ]);

  const [registerTable, { reload }] = useTable({
    columns: columns.value,
    dataSource: Data,
    bordered: true,
    pagination: pagination.value,
    onChange: (page, pageSize) => {
      pagination.value.current = page;
      pagination.value.pageSize = pageSize;
      fetchData(pagination.value);
    },
  });

  async function fetchData(params) {
    let response = {};
    const deviceName = await deviceToOwnerAPI();

    if (params.taskId) {
      response = await detailTaskPage(params);
    } else {
      //设备管理
      response = await detailTaskPageDevAPI(params);
    }

    const deviceNameMap = deviceName.data.reduce((map, item) => {
      map[item.label] = item.value;
      return map;
    }, {});
    Data.value = response.data.records.map((record) => ({
      ...record,
      deviceName: deviceNameMap[record.device] || '未知设备',
    }));

    pagination.value.total = response.total;
    reload();
  }
</script>
